<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ko" lang="ko">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta name="Author" content="odini84@gmail.com" />
	<title>HTML LINK VIEWER</title>
	<style type="text/css">
		* {
			margin: 0;
			padding: 0;
		}
		body, h1, h2, h3, h4, h5, h6 {
			font-size: 11px;
			line-height: 1.5;
		}
		html,
		body,
		#frameWrap {
			height: 100%;
			overflow-y: hidden;
		}
		li {
			list-style: none;
		}
		#frameWrap {
			position: relative;
			width: 100%;
		}
			#frameSidebarWrap,
			#frameContentWrap {
				height: 100%;
			}
			#frameSidebarWrap {
				position: absolute;
				left: 0;
				top: 0;
				width: 250px;
				overflow-x: hidden;
			}
			#frameContentWrap {
				overflow: hidden;
				margin-left: 282px;
			}
			#frameSidebarWrap iframe,
			#frameContentWrap iframe {
				width: 100%;
				height: 100%;
				margin: 0;
				padding: 0;
			}
		/* sidebar control */
		#sidebarCtrl {
			position: absolute;
			left: 250px;
			top: 0;
			width: 30px;
			height: 100px;
			line-height: 100px;
			border: 1px solid #bbb;
			text-transform: Capitalize;
			background: #fff;
		}
		#sidebarCtrl button {
			background: none;
			border: 0;
			width: 100%;
			height: 100%;
			font-size: 50px;
			color: #2869b3;
			cursor: pointer;
			font-weight: bold;
		}
		#frameWrap.hide #sidebarCtrl {
			left: 0;
		}
		#frameWrap.hide #sidebarCtrl button { 
			color: #ec1d39;
		}
		#frameWrap.hide #frameSidebarWrap {
			width: 0;
		}
		#frameWrap.hide #frameContentWrap {
			margin-left: 33px;
		}
		/* 메인 링크 */
		#btnMainLink {
			width: 200px;
			height: 30px;
		}
	</style>
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js" type="text/javascript"></script>
</head>
<body>
	<div id="frameWrap">
		<div id="frameSidebarWrap">
			<iframe id="frameSidebar" src="./side_link.html" frameborder="0" scrolling="yes" marginwidth="0" marginheight="0" title="링크 리스트"></iframe>
		</div>
		<div id="frameContentWrap">
			<iframe id="frameContent" name="viewContent" src="./view.html" frameborder="0" scrolling="auto" marginwidth="0" marginheight="0" title="페이지 뷰"></iframe>
		</div>
		<span class="div-line">&nbsp;</span>
		<div id="sidebarCtrl">
			<button type="button" title="사이드바 숨기기">‹</button>
		</div>
	</div>
	<script type="text/javascript">
		$(function(){
			// 메인 링크 이동
			$("#frameSidebar").load(function() {
				$('#frameSidebar').contents().find('#frameLinkMain a').click(function(){
				_url = $(this).attr('href');
				document.location = _url;
				return false;
				});
			});
			// sidebar ctrl
			$('#sidebarCtrl button').toggle(function(){
				_txt = '›';
			$('#sidebarCtrl button').attr('title','사이드 보이기');
				$('#sidebarCtrl button').text(_txt);
				$('#frameWrap').addClass('hide');
			},function(){
				_txt = '‹';
			$('#sidebarCtrl button').attr('title','사이드 숨기기');
				$('#sidebarCtrl button').text(_txt);
				$('#frameWrap').removeClass('hide');
			});
			// div-line height
			var _body_height = $('#frameWrap').height();
			$('#frameWrap .div-line').height(_body_height);
		});
	</script>
</body>
</html>
